import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login/index.vue')
  },

  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home/index.vue')
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: () => import('../views/Detail')
  },

  {
    path: '*',
    name: 'notfound',
    component: () => import('../views/NotFound/index.vue')
  }
]

// 路由对象
const router = new VueRouter({
  routes
})


// 所有路由都能触发，进入路由之前触发
// to:    去哪个路由，  的路由信息对象
// from： 从哪个路由来， 的路由信息对象
// next： 是一个函数，调用这个函数代表 放行， 不调用代表不放行
// next有三种用法
//    直接调用： next()     原本想去哪，还是放行去哪
//    传入路径： next(路径)  管你以前去哪，我都给你放行到这个路径
//    不放行  next(false)  不放行，就留在原地

// 准备一个白名单
const whiteList = ['login', 'notfound']
router.beforeEach ( (to, from ,next) => {
  
  // 在白名单里
  if ( whiteList.includes(to.name) ) {
    // 直接放行
    next()
  }else {
    // 不在白名单里要判断有没有登录
    // 判断依据是有没有token
    const token = localStorage.getItem('token')
    if (token) {

      next()
    }else {

      alert('请先登录！')
      next('/login')
    }
  }
}) 


export default router
